<template>
  <PageWrapper contentBackground :contentFullHeight="true">
    <Tabs default-active-key="1">
      <TabPane tab="全部已分享" key="1">
        <BasicTable @register="registerTable" />
      </TabPane>
      <TabPane tab="我分享的" key="2">
        <BasicTable @register="registerShareTable">
          <template #action="{ record }">
            <TableAction
              :actions="[
                {
                  label: '修改',
                  icon: 'ic:outline-edit',
                  onClick: handleEdit.bind(null, record),
                  // auth: 'super', // 根据权限控制是否显示: 有权限，会显示
                },
                {
                  label: '删除',
                  icon: 'ic:outline-delete-outline',
                  onClick: handleDelete.bind(null, record),
                  // auth: 'super', // 根据权限控制是否显示: 有权限，会显示
                },
              ]"
            />
          </template>
        </BasicTable>
      </TabPane>
    </Tabs>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { PageWrapper } from '/@/components/Page';
  import { Tabs, TabPane } from 'ant-design-vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { getAllShareColoums } from './tableData';
  // 全部已分享表格初始化
  const [registerTable] = useTable({
    columns: getAllShareColoums(),
    rowKey: 'id',
    bordered: true,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
  });
  // 我分享的表格初始化
  const [registerShareTable] = useTable({
    columns: getAllShareColoums(),
    rowKey: 'id',
    bordered: true,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    pagination: { pageSize: 12, pageSizeOptions: ['12', '24', '36', '48'], defaultPageSize: 12 },
    actionColumn: {
      width: 300,
      fixed: 'right',
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });
  // 操作点击事件
  const handleEdit = (record: Recordable) => {
    console.log('点击了修改', record);
  };
  const handleDelete = (record: Recordable) => {
    console.log('点击了删除', record);
  };
</script>
